<div class="detail_haed">
    
    <div class="detail_haed_classify">
        <!-- 弹性盒 -->
        <!-- 筛选分类 -->
        <div class="detail_haed_top">

            <div class="detail_haed_top_lef">
                分类
            </div>
            <!-- 多种 -->
            <div class="detail_haed_top_rig">
                <a href="">
                    <span>全部</span>
                </a>
            </div>
        </div>
        <div class="detail_haed_bot">
            <!-- 商品排序 -->
            <div class="detail_haed_bot_box">
                <div class="detail_haed_title">
                    排序
                </div>
                <div class="detail_haed_list">
                    <span class="item">
                        综合销量
                    </span><span class="item">
                        销量
                    </span><span class="item">
                        价格
                    </span><span class="item">
                        新品
                    </span>
                </div>
            </div>
            <div class="detail_haed_bot_box">
                <div class="detail_haed_title">
                    筛选条件
                </div>
                <!-- 目前排序的类型 -->
                <div class="detail_haed_list">
                    
                </div>
            </div>
            
        </div>
    </div>
    

    <!-- 内容 -->


    <div class="info_banxin">
        <div class="info_banxin_item">
            <!-- 商品图片--介绍 -->
            <div class="info_banxin_item_img">
                <!-- 商品图片 -->
                <a href="">
                    <img src="https://pic.flyco.net.cn/mall/goods/FH6286/main/FH6286-PNG_1591858130325.jpg" alt="">
                </a>
                <!-- 右上角小图片 -->
                <div class="info_banxin_item_pic">
                    <img src="https://pic.flyco.net.cn/mall/cms/icon/new.png" alt="">
                </div>
                <!-- 商品介绍 -->
                <div class="info_banxin_item_bet">
                    <span>自由控温每1℃ 精细呵护发质</span>
                </div>
            </div>
            <!-- 商品名称 -->
            <div class="info_banxin_item_name">
                <a href=""> 飞科智能电吹风FH6286 </a>
                <img src="" alt="">
            </div>
            <!-- 商品价格 -->
            <div class="info_banxin_item_price">
                <h3>￥</h3>
                <strong>249.00</strong>
            </div>
        </div>
        


        
    </div>
    <!-- 按钮 -->
    <div class="detail_haed_trigger">
        
    </div>
</div>


<script>

        // 分类部分的渲染
    $(function () {
        var $detail_haed_top_rig = $(".detail_haed_top_rig")
        // 获取数据
        $.getJSON("../json/haed.json")
        // 响应成功后
        .then(function (res) {
            let html = `<a href="">
                            <span>全部</span>
                         </a>`;
            // 数组遍历
            res.data.map(function (resa) {
                
                html +=  `<a href="">
                            <span>${resa.name}</span>
                         </a>`
            })
            // 把遍历后的放入盒子里
            $detail_haed_top_rig.html( html )
        })
    })


    // 商品渲染
    $(function(){

        var options = {
            url : "../json/所有数据.json"
        };
        var page_no = 0;
        // 获取数据
        $.getJSON( options )
        // 响应成功后
        .then( function(res){
            // 回调函数
            renderPage( res.data.wapGoods );
            // 声明一个空数组，来放对象key值
            var iii = [];
            for (const item in res.data.wapGoods) {
                // 把数据对象的key值放到数组里，因为对象不可以取出长度，可以用数组配合计算长度
                iii.push(item)
            }       
                                    // 用数组的长度来定义一共多少个盒子
            $(".detail_haed_trigger").pagination( iii.length, {
                    // 选择页码之后会调用的函数; 
                    callback: changePage.bind( res.data.wapGoods ),
                    // 永远会显示第一页的选项按钮;
                    num_edge_entries: 1,
                    // 每页显示条数，这个会影响计算分页的数量; 
                    items_per_page : 12,
                    // 下一页按钮显示的内容 : 
                    next_text  : "下一页",
                    prev_text : "上一页"
            });
        })
    //    回调
        function renderPage( list ){
            var html = "";
            var lists = list
            var list_key =[];
            for(var item in list){
                    // 如果商品数量不够会导致报错;
                list_key.push(item)
                
            }
                // 循环遍历对象中的数据
            for(var i = page_no * 12 ; i < (page_no + 1) * 12 ; i ++){
                if( list[list_key[i]] === undefined){ break };
                //   判断是否需要  新  字图片
                    var ppp = list[list_key[i]].newStatus === 1 ?`<div class="info_banxin_item_pic"><img src="https://pic.flyco.net.cn/mall/cms/icon/new.png" alt=""></div>` : ""
                html +=   `<div class="info_banxin_item">
                                <div class="info_banxin_item_img">
                                    <a href="./productDetails.html?${list_key[i]}">
                                        <img src="${list[list_key[i]].pic}" alt="">
                                    </a>
                                    ${ppp}
                                    <div class="info_banxin_item_bet">
                                        <span>${list[list_key[i]].subTitle}</span>
                                    </div>
                                </div>
                                <div class="info_banxin_item_name">
                                    <a href="./productDetails.html?${list_key[i]}"> ${list[list_key[i]].name}</a>   
                                    <img class="shoppingCart" data-id="${list_key[i]}" src="" alt="">
                                </div>
                                <div class="info_banxin_item_price">
                                    <h3>￥</h3>
                                    <strong>${list[list_key[i]].originalPrice}</strong>
                                </div>
                            </div>`
                            
            };
            $(".info_banxin").html(html)
            
            //    点击购物车
            $(".shoppingCart").click(function () {
                // 调用函数
                local($(this).attr("data-id"))
            })
                // 声明
            var cart = {};
            // 判定之前本都数据有没有存值
            if (localStorage.getItem("cart")) {
                // 如果有就赋值给他
                cart = JSON.parse( localStorage.getItem("cart") )
            }

            // 多次点击的时候
            function  local(id) {
                // 判断点击的这个元素对象是否有这个内容
                if (id in cart) {
                    // 如果有就cunm++
                    cart[id].cunm ++
                }else{
                    // 如果没有那就赋值给他
                    cart[id] = lists[id];
                    cart[id].cunm = 1;
                }
                // 存储到本地
                localStorage.setItem("cart",JSON.stringify(cart))
            }
        }


        function changePage( index ){
            // this : 渲染页面的数据; 
            page_no = index;
            renderPage( this );
        }

        
        



         
})


</script>
